<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="father" style="width: 500px; height: 500px; background-color: pink;">
        <div class="son" style="width: 200px; height: 200px; background-color: skyblue;"></div>
    </div>

    <script>
        document.querySelector('.father').addEventListener('click', function () {
            alert('点击了父元素')
        })
        document.addEventListener('click', function () {
            alert('点击了document元素')
        })

        // e.stopPropagation() 阻止事件冒泡
    </script>
</body>

</html>